<template>
  <div class="h-footer">
    <router-link tag="div" :to="item.page" v-for="(item,i) in items" :key="i" class="item-icon">
      <div v-text="item.text"></div>
    </router-link>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        {
          text: "首页",
          page: "/index"
        },
        {
          text: "在线客服",
          page: "/online"
        },
        {
          text: "装修方案",
          page: "/program"
        },
        {
          text: "装修公司",
          page: "/company"
        },
        {
          text: "个人中心",
          page: "/mine"
        }
      ]
    };
  }
};
</script>

<style lang="scss">
.h-footer {
  height: 56px;
  line-height: 56px;
  display: flex;
  border-top: 1px solid #e6e6e6;
  padding: 6px 0 4px 0;
  width: 100%;
  z-index: 999;
  background: #fff;
  .item-icon {
    flex: 1;
    text-align: center;
    font-size: 12px;
  }
}
.router-link-exact-active {
  color: #ee4433;
}
</style>